<template>
  <div class="contail">
    <van-nav-bar title="社区">
    </van-nav-bar>
    <div class="box">
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <van-cell v-for="item in list" :key="item">
          <div class="item">
            <div class="content">
              <div class="img"></div>
              <div class="text">
                <router-link :to="{ path: '/community/detail/1' }">
                  <h2>阿斯顿阿斯顿阿斯顿哎说</h2>
                </router-link>
              </div>
            </div>
            <button class="btn">马山抢</button>
          </div>
        </van-cell>
      </van-list>
    </div>

  </div>
</template>

<script>
export default {
  name: 'community',
  data() {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        this.loading = false

        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.contail {
  margin-bottom: 100px;
  background-color: #eee;
}
.box {
  padding: 0 10px;
}
.item {
  position: relative;
  background: #fff;
  height: auto;
  overflow: hidden;
}
.content {
  margin: 20px 0 14px 0;
  display: flex;
}

.text {
  margin-left: 16px;
  h2 {
    font-size: 16px;
  }
}
.img {
  width: 88px;
  height: 88px;
  background-color: green;
}
.btn {
  width: 80px;
  height: 30px;
  border: none;
  position: absolute;
  bottom: 15px;
  right: 15px;
  background-color: #f5294c;
  font-size: 12px;
  color: #fff;
}
</style>

